<!--
 * @Author: fengxx
 * @Date: 2025-10-13 10:57:13
 * @LastEditors: fengxx
 * @LastEditTime: 2025-10-21 15:38:16
-->
<script setup lang="ts">
interface MetaType {
  title?: string
  icon: string
}
interface MenuRoute {
  path: string
  component: string
  name: string
  meta?: MetaType
  children: MenuRoute[]
}

defineProps<{
  menuItem: MenuRoute
  path?: string
}>()
</script>
<template>
  <el-sub-menu
    v-if="menuItem.children && menuItem.children.length > 0"
    :index="menuItem.path"
    class="sub-menu-style"
  >
    <template #title>
      <component :is="menuItem.meta?.icon" style="width: 16px; height: 16px"></component>
      <span>{{ menuItem.meta?.title }}</span>
    </template>
    <my-menu-item
      v-for="(value, index) in menuItem.children"
      :key="index"
      :menu-item="value"
      :path="`${menuItem.path}/${value.path}`"
    ></my-menu-item>
  </el-sub-menu>
  <el-menu-item :index="path || menuItem.path" :route="path || menuItem.path" v-else>
    <component :is="menuItem.meta?.icon" style="width: 16px; height: 16px"></component>
    <span>{{ menuItem.meta?.title }}</span>
  </el-menu-item>
</template>
<style scoped>
.sub-menu-style {
  color: #fff;
}
</style>
